

<include file="./Tpl/default/Index/header.html"/>
<css file="__PUBLIC__/index/css/index.css"/>
<css file="__PUBLIC__/index/css/complete.css"/>
<script>
    $(function(){
        var PUBLIC = "__PUBLIC__";
        var url = "__URL__";
        var app = "__APP__";
        water($('.box'));
        var num=1;
        var stop = true;
        var uid = "{$Think.session.uid}";
        $(window).scroll(function(){
            var lastBox = $('.box').eq($('.box').length-1);
            if(getLast($('.box')) && stop){
                stop=false;
                $.post(url+'/ajaxhua',{'num':num},function(data){
                    if(data.num==0){
                        stop=false;
                        return false;
                    }
                    //  data = eval(data);     
                    for(var i in data){
                        var box = "<div class='box'>";         
                        box +="<li>";
                        box +="<div class='huabname'>";
                        box +="<div class='huatop'>";
                        box +="<span class='kname'>"+data[i].name+"</span>";
                        box +=" </div>";
                        box +=" <a href='"+app+"/Complete/showhuab/kid/"+data[i].kid+"' class='smallimg'>";
                        var img = data[i].img;
                        for(var j in img){
                            box +="<img src='"+img[j].adres+"' width='60' height='60'>";
                        }
                        box +="</a>";
                        box +="<div class='attuser'>";
                        box +="<img src='"+data[i].thump+"' width='25' height='25'/>";
                        box +="&nbsp;&nbsp;<a href='"+app+"/Complete/showuser/uid/"+data[i].uid+"'>"+data[i].uname+"</a>";
                        box +="</div>";
                        box +="<div class='atten1'>";
                        box +=" <a href='javascript:;' class='relatten' name='"+data[i].kid+"'>已关注</a>"; 
                        box +="</div>";
                        box +="</div>";
                        box +="</li>";        
                        box +="</div>";
                        $('#water ul').append(box);
                    }
                    water($('.box'));
                    stop=true;
                    num++;
                },'json')
                         
            }
        })
        //获得滚动时最后一个div
        function getLast(obj){
            var windowH = document.body.clientHeight || document.documentElement.clientHeight;
            var scrollH = $(window).scrollTop();;
            var scrollH = $(window).scrollTop();
            obj = obj.eq(obj.length-1);
            var objH = obj.outerHeight(true)/2+obj.offset().top;
            return objH<(windowH+scrollH)?true:false;
            
            
        }
        
        function water(obj){
            var boxTop = [];
            obj.each(function(index,box){
                if(index<5){
                    boxTop.push($(box).outerHeight(true));
                }
            })
            for(var i=5;i<obj.length;i++){
                var minHeight = Math.min.apply(false,boxTop);
                obj.eq(i).css('position','absolute');
                var minLeftindex =getMinHeight(boxTop,minHeight);
                obj.eq(i).css({top:minHeight,left:obj.eq(minLeftindex).position().left})
                boxTop[minLeftindex] = obj.eq(i).outerHeight()+ boxTop[minLeftindex];
            }     
            function getMinHeight(arr,min){
                var index = '';
                for( var i in arr){
                    if(arr[i] == min){
                        index = i;
                    }
                }
                return index;
            }
            
        }
        
        $('.bimg .pin img').live({
            mouseenter:
                function(){
                $(this).css({opacity:0.8})
            }
            , mouseleave:
                function(){
                $(this).css({opacity:1})
            }
        })
        $('.bimg').live( {mouseenter:
                function()
            {
                $(this).children('.li').css('display','block');

            },
            mouseleave:
                function()
            {
                $(this).children('.li').css('display','none');

            }
        }) 
    
        //用户头像资料
        $('.mybox').hover(function(){
            $('.my .shez').animate({opacity:1},500);
        },function(){
            $('.my .shez').animate({opacity:0},500);
        })
        $('.my .shez').hover(function(){
            $(this).addClass('moveshez');
        },function(){
            $(this).removeClass('moveshez');
        })
        $('.findfriend a').hover(function(){
            $('.findfriend a em').addClass('hover');
        },function(){
            $('.findfriend a em').removeClass('hover');
        })
       
    })
</script>
<div class="middle">
    <div class="content">
        <div class="top">
            <ul class="con_link mycon_link">
                <li class="cai mycai">
                    <a href="{:U('Complete/index')}" class="caiji">我关注的采集</a>
                </li>
                <li class="hua myhua">
                    <a href="javascript:;" class="huaban  check">我关注的画板</a>
                </li>
            </ul>
        </div>
        <!--瀑布流图片布局-->
        <div id="water">
            <div class="box mybox">
                <div class="border myborder">
                    <div class="pin">
                        <div class="my">
                            <a href="{:U('Complete/showuser')}"><img src="{$user.thump}"></a>
                            <a href="{:U('Complete/showuser')}" class="myname">{$user.uname}</a>
                            <a href="{:U('User/index/uid/'.$_SESSION['uid'])}" class="shez"></a>
                        </div>
                    </div>
                    <div class="mypin">
                        <a href="{:U('Complete/userimg/uid/'.$user['uid'])}" class="mycaiji mya">
                            <h5>{$user.inum}</h5>
                            <p>采集</p>
                        </a><a href="{:U('Complete/showuser/uid/'.$user['uid'])}" class="myhua mya">
                            <h5>{$user.num}</h5>
                            <p>画板</p></a><a href="#" class="myfens mya">
                            <h5>0</h5>
                            <p>粉丝</p>
                        </a>
                    </div>
                    <div class="bottom findfriend">
                        <a href="#">
                            <strong>查找在花瓣的好友</strong>
                            <em></em>
                        </a>
                    </div>
                </div>
            </div>
            <ul>
                <volist name="hua" id="s">
                    <div class="box">
                        <li>
                            <div class="huabname">
                                <div class="huatop">
                                    <span class="kname">{$s.name}</span>
                                    <span class="knum">({$s.num})</span>
                                </div>
                                <a href="{:U('Complete/showhuab/kid/'.$s['kid'])}" class="smallimg">
                                    <taglib name="blog"/>
                                    <blog:showimg kid="$s['kid']">
                                        <img src="{$field.adres}" width="60" height="60"/>
                                    </blog:showimg>
                                </a>
                                <div class="attuser">
                                    <img src="{$s.thump}" width="25" height="25"/>
                                    &nbsp;&nbsp;<a href="{:U('Complete/showuser/uid/'.$s['uid'])}">{$s.uname}</a>
                                </div>
                                <div class="atten1">    
                                    <a href="javascript:;" class="relatten" name="{$s.kid}">已关注</a>
                                </div>
                            </div>
                        </li>
                    </div>
                </volist>
            </ul>

        </div>
    </div>
</div>
</body>
</html>
